<template>
  <view>

    <!-- 分享记录列表 -->
    <scroll-view
        scroll-y
        @scrolltolower="loadMore"
        :refresher-enabled="true"
        :refresher-triggered="refreshing"
        @refresherrefresh="onRefresh"
        class="scroll-area"
        style="height: calc(100vh - 450rpx);"
    >
      <!-- 下拉刷新提示 -->
      <view class="refresh-tip" v-if="refreshing">
        <text class="iconfont icon-loading font28"></text>
        <text class="ml-1">正在刷新...</text>
      </view>

      <view v-if="List.length>0" v-for="(item,index) in List" :key="index" class="record-item d-flex-middle mx-3 py-3">
        <view class="d-flex d-flex-column">
          <text><text class="text-right" style="width: 140rpx;display: inline-block;">分享用户：</text>{{ item.phone}}</text>
          <text class="pt-1"><text class="text-right"  style="width: 140rpx;display: inline-block;">订单号：</text>{{ item.order_no }}</text>
        <view>
          <text class="text-right" style="width: 140rpx;display: inline-block;">时间：</text><text class="time font22 color999 mt-1">{{ item.created_at }}</text></view>
        </view>
        <text class="share-reward">
          {{ item.amount || 0 }}元
        </text>
      </view>

      <!-- 加载更多提示 -->
      <view class="loading-more text-center py-3" v-if="loadingMore">
        <text class="font24 color999">加载中...</text>
      </view>
      <view class="loading-more text-center py-3" v-else-if="noMoreData">
        <text class="font24 color999">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {
  fileApi,
} from "@/http/fileApi"

export default {
  data() {
    return {
      List: [],
      refreshing: false, // 下拉刷新状态
      loadingMore: false, // 加载更多状态
      noMoreData: false, // 没有更多数据
      page: 1, // 当前页码
	  type:1
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    })
  },
  onLoad() {
    this.initInviteList()
  },
  methods: {
    async initInviteList() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...'
        });

        let params = {
          page: this.page,
          type:this.type
        };

        let res = await fileApi.getInviteList(params);
        // 处理分页相关状态
        if (res.data && Array.isArray(res.data)) {
          // 如果是第一页，直接赋值；否则追加数据
          if (this.page === 1) {
            this.List = res.data;
          } else {
            this.List = [...this.List, ...res.data];
          }
          // 根据返回的数据判断是否还有更多数据
          this.noMoreData = res.data.length === 0 || res.data.length < 10; // 假设每页10条
        }

        // 隐藏加载提示
        uni.hideLoading();
      } catch (error) {
        // 隐藏加载提示
        uni.hideLoading();

        uni.showToast({
          title: '获取邀请记录失败',
          icon: 'none'
        });

        // 输出错误信息到控制台，便于调试
        console.error('获取邀请记录失败:', error);
      }
    },

    // 下拉刷新
    async onRefresh() {
      if (this.refreshing) return;

      this.refreshing = true;
      this.page = 1;

      try {
        // 重新获取邀请记录
        await this.initInviteList();

        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        });
      } finally {
        this.refreshing = false;
      }
    },

    // 加载更多
    async loadMore() {
      if (this.loadingMore || this.noMoreData || this.refreshing) return;

      this.loadingMore = true;
      this.page++;

      try {
        await this.initInviteList();
      } catch (error) {
        this.page--;
        this.loadingMore = false;
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loadingMore = false;
      }
    }
  }
}
</script>

<style>
.balance-card {
  background: linear-gradient(90deg, #feb50f, #fc7608);
  color: white;
}

.colorfc7608 {
  color: #fc7608;
}

.color7ac0d9 {
  color: #6bd0e0;
}

.bBottom {
  border-top: 1rpx solid rgba(255, 255, 255, .5);
}

.record-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.share-reward {
  color: #4CAF50;
}

.b-d {
  background-color: #f8f8f8;
}

.amount {
  font-size: 60rpx;
}

.wBottom {
  position: relative;
}

.scroll-area {
  height: calc(100vh - 300rpx);
}

.refresh-tip {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
}

.loading-more {
  text-align: center;
}

.icon-loading {
  display: inline-block;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.time {
  font-size: 22rpx;
}

.text-center {
  text-align: center;
}

.py-3 {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

.font24 {
  font-size: 24rpx;
}
</style>
